<template>
  <el-card style="width:360px;height:590px">
    <div slot="header">
      <span>{{title}}</span>
    </div>
    <el-row>
      <div ref="chart" style="height:180px"></div>
      <div class="center_x user_count_counter" style="width:100%">
        <span>{{total}}</span>
      </div>
    </el-row>
    <el-row class="mt_5">
      <el-row :gutter="24" v-for="(item,index) in source" :key="index" class="ma_3">
        <el-col :span="5" class="center_x">
          <ColorCard width="40px" height="20px" :color="option.color[index]"></ColorCard>
        </el-col>
        <el-col :span="10" class="center_x" style="color:gray;">
          <span>{{item.name}}</span>
        </el-col>
        <el-col :span="5" class="center_x">
          <span style="font-weight: 600;">{{item.value}}</span>
        </el-col>
        <el-col :span="4" class="center_x">
          <span>{{parse((item.value/total*100).toFixed(2))}}%</span>
        </el-col>
      </el-row>
    </el-row>
  </el-card>
</template>
<script>
import ColorCard from "./ColorCard.vue";
export default {
  props: {
    title: String,
    itemTitle: String,
    source: Array
  },
  data() {
    return {
      total: 0,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        // },
        series: [
          {
            name: this.itemTitle,
            type: "pie",
            radius: ["65%", "90%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ],
        color: [
          "#3aa0ff",
          "#36cbcb",
          "#6dd48b",
          "#fec03d",
          "#fb6260",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3"
        ]
      }
      //数据源
    };
  },
  components: {
    ColorCard
  },
  watch: {
    source: function() {
      this.total = this.countValue(this.source);
      this.init();
    }
  },
  methods: {
    countValue(array) {
      let total = 0;
      for (let i = 0; i < array.length; i++) {
        total += array[i].value;
      }
      return total;
    },
    parse(num) {
      if (num) return num;
      return 0;
    },
    init() {
      this.total = this.countValue(this.source);
      this.option.series[0].data = this.source; //初始化数据源
      var myEcharts = this.$echarts.init(this.$refs.chart);
      myEcharts.setOption(this.option);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
.user_count_counter {
  position: absolute;
  z-index: 15;
  bottom: 46%;
  font-weight: 600;
}
</style>
